import { convertHtmlToDocxBuffer } from '../src/index';

// 创建演示页面的HTML内容
document.querySelector('#app')!.innerHTML = `
  <div style="max-width: 800px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif;">
    <h1 style="text-align: center; color: #333;">HTML 转 DOCX 在线转换器</h1>
    <p style="text-align: center; color: #666; margin-bottom: 30px;">
      输入HTML内容，点击转换按钮生成DOCX文档并下载
    </p>
    
    <div style="margin-bottom: 20px;">
      <label for="html-input" style="display: block; margin-bottom: 5px; font-weight: bold;">
        输入HTML内容：
      </label>
      <textarea 
        id="html-input" 
        style="width: 100%; height: 300px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; font-family: monospace;"
        placeholder="请输入要转换的HTML内容..."
      ></textarea>
    </div>

    <div style="margin-bottom: 20px;">
      <h3>页面设置</h3>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
        <div>
          <label>上边距 (厘米):</label>
          <input type="number" id="margin-top" value="2.54" min="0" step="0.1" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>右边距 (厘米):</label>
          <input type="number" id="margin-right" value="2.54" min="0" step="0.1" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>下边距 (厘米):</label>
          <input type="number" id="margin-bottom" value="2.54" min="0" step="0.1" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>左边距 (厘米):</label>
          <input type="number" id="margin-left" value="2.54" min="0" step="0.1" style="width: 100%; padding: 5px;">
        </div>
      </div>
    </div>

    <div style="margin-bottom: 20px;">
      <h3>文档属性设置</h3>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
        <div>
          <label>创建者:</label>
          <input type="text" id="creator" placeholder="文档创建者" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>标题:</label>
          <input type="text" id="title" placeholder="文档标题" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>主题:</label>
          <input type="text" id="subject" placeholder="文档主题" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>关键词:</label>
          <input type="text" id="keywords" placeholder="关键词，用逗号分隔" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>修订版本:</label>
          <input type="number" id="revision" value="1" min="1" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>最后修改者:</label>
          <input type="text" id="last-modified-by" placeholder="最后修改者" style="width: 100%; padding: 5px;">
        </div>
      </div>
      <div style="margin-top: 10px;">
        <label>描述:</label>
        <textarea id="description" placeholder="文档描述" style="width: 100%; height: 60px; padding: 5px; resize: vertical;"></textarea>
      </div>
    </div>

    <div style="margin-bottom: 20px;">
      <h3>页眉页脚设置</h3>
      <div style="margin-bottom: 15px;">
        <label>页眉内容 (HTML):</label>
        <textarea id="header-content" placeholder="输入页眉HTML内容..." style="width: 100%; height: 80px; padding: 5px; resize: vertical; font-family: monospace;"></textarea>
      </div>
      <div style="margin-bottom: 15px;">
        <label>页脚内容 (HTML):</label>
        <textarea id="footer-content" placeholder="输入页脚HTML内容..." style="width: 100%; height: 80px; padding: 5px; resize: vertical; font-family: monospace;"></textarea>
      </div>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
        <div>
          <label>页眉字体大小:</label>
          <input type="number" id="header-font-size" value="16" min="8" max="72" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>页脚字体大小:</label>
          <input type="number" id="footer-font-size" value="14" min="8" max="72" style="width: 100%; padding: 5px;">
        </div>
        <div>
          <label>页眉对齐方式:</label>
          <select id="header-alignment" style="width: 100%; padding: 5px;">
            <option value="left">左对齐</option>
            <option value="center" selected>居中对齐</option>
            <option value="right">右对齐</option>
          </select>
        </div>
        <div>
          <label>页脚对齐方式:</label>
          <select id="footer-alignment" style="width: 100%; padding: 5px;">
            <option value="left">左对齐</option>
            <option value="center" selected>居中对齐</option>
            <option value="right">右对齐</option>
          </select>
        </div>
      </div>
    </div>
    
    <div style="text-align: center; margin-bottom: 20px;">
      <button 
        id="convert-btn" 
        style="background: #007bff; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;"
        onmouseover="this.style.background='#0056b3'" 
        onmouseout="this.style.background='#007bff'"
      >
        转换并下载 DOCX
      </button>
    </div>
    
    <div id="status" style="text-align: center; margin-bottom: 20px; min-height: 20px;"></div>
    
    <div id="warnings" style="margin-top: 20px;"></div>

          <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 4px;">
      <h3 style="margin-top: 0;">示例HTML:</h3>
      <button id="load-example-btn" style="margin-bottom: 10px; padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
        加载示例
      </button>
      <button id="load-hr-example-btn" style="margin-bottom: 10px; margin-left: 10px; padding: 8px 16px; background: #17a2b8; color: white; border: none; border-radius: 4px; cursor: pointer;">
        加载HR示例
      </button>
      <button id="load-table-merge-example-btn" style="margin-bottom: 10px; margin-left: 10px; padding: 8px 16px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;">
        加载表格合并示例
      </button>
      <button id="load-checkbox-example-btn" style="margin-bottom: 10px; margin-left: 10px; padding: 8px 16px; background: #fd7e14; color: white; border: none; border-radius: 4px; cursor: pointer;">
        加载Checkbox示例
      </button>
      <button id="load-header-footer-example-btn" style="margin-bottom: 10px; margin-left: 10px; padding: 8px 16px; background: #20c997; color: white; border: none; border-radius: 4px; cursor: pointer;">
        加载页眉页脚示例
      </button>
      <button id="load-complete-example-btn" style="margin-bottom: 10px; margin-left: 10px; padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
        加载完整功能示例
      </button>
     
    </div>

          <div style="margin-top: 20px; padding: 15px; background: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 4px;">
        <h4 style="margin-top: 0; color: #0066cc;">支持的HTML标签和样式:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>标题:</strong> &lt;h1&gt; - &lt;h6&gt; (支持颜色、字体、大小、缩进)</li>
          <li><strong>段落:</strong> &lt;p&gt;, &lt;div&gt; (支持颜色、字体、大小、缩进)</li>
          <li><strong>格式化:</strong> &lt;strong&gt;, &lt;b&gt;, &lt;em&gt;, &lt;i&gt;, &lt;u&gt; (支持颜色、字体、大小)</li>
          <li><strong>中划线:</strong> text-decoration: line-through (支持颜色、字体、大小)</li>
          <li><strong>链接:</strong> &lt;a&gt; (支持颜色、字体、大小自定义)</li>
          <li><strong>列表:</strong> &lt;ul&gt;, &lt;ol&gt;, &lt;li&gt; (支持颜色、字体、大小、缩进)</li>
          <li><strong>特殊标签:</strong> &lt;small&gt;, &lt;big&gt;, &lt;sub&gt;, &lt;sup&gt; (字体大小自动调整)</li>
          <li><strong>图片:</strong> &lt;img&gt; (支持 base64 格式和浏览器中的远程图片)</li>
          <li><strong>表格:</strong> &lt;table&gt;, &lt;tr&gt;, &lt;td&gt;, &lt;th&gt;, &lt;thead&gt;, &lt;tbody&gt; (支持样式和格式化)</li>
          <li><strong>换行:</strong> &lt;br&gt;</li>
          <li><strong>分割线:</strong> &lt;hr&gt; (支持样式和CSS类)</li>
          <li><strong>复选框:</strong> &lt;input type="checkbox"&gt; (支持选中状态和样式)</li>
        </ul>
        <h4 style="color: #0066cc;">页眉页脚支持说明:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>页眉内容:</strong> 支持HTML格式，包括段落、标题、样式等</li>
          <li><strong>页脚内容:</strong> 支持HTML格式，包括段落、标题、样式等</li>
          <li><strong>字体设置:</strong> 支持字体大小、字体名称、颜色等</li>
          <li><strong>对齐方式:</strong> 支持左对齐、居中对齐、右对齐</li>
          <li><strong>样式支持:</strong> 支持粗体、斜体、下划线等文本样式</li>
          <li><strong>HTML标签:</strong> 支持 p、div、span、h1-h6、strong、em、u 等标签</li>
          <li><strong>应用场景:</strong> 公司文档、报告、合同等需要统一页眉页脚的文档</li>
        </ul>
        <h4 style="color: #0066cc;">支持的内联样式:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>颜色:</strong> color (支持hex、rgb、rgba、颜色名称)</li>
          <li><strong>背景色:</strong> background-color (支持hex、rgb、rgba、颜色名称)</li>
          <li><strong>边框:</strong> border, border-top/right/bottom/left, border-width/style/color (支持各种样式和单位)</li>
          <li><strong>字体:</strong> font-family, font-size, font-weight, font-style</li>
          <li><strong>缩进:</strong> text-indent, margin-left, padding-left</li>
          <li><strong>装饰:</strong> text-decoration (下划线、中划线)</li>
          <li><strong>对齐:</strong> text-align (left, center, right, justify)</li>
          <li><strong>行高:</strong> line-height (数字倍数=倍数行距、pt/px等固定单位=固定行距、normal)</li>
        </ul>
        <h4 style="color: #0066cc;">支持的自定义属性:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>字符间距缩放:</strong> data-scale="55" (等同于 CSS 样式 transform: scaleX(0.55); transform-origin: left)</li>
          <li><strong>使用示例:</strong> &lt;span data-scale="75"&gt;75%字符间距缩放&lt;/span&gt;</li>
          <li><strong>缩放范围:</strong> 支持任意正数百分比 (如: 50, 120, 150)</li>
          <li><strong>说明:</strong> 保持字体大小不变，仅调整字符之间的间距，对应WPS字符缩放功能</li>
        </ul>
        <h4 style="color: #0066cc;">文档属性支持:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>创建者:</strong> 设置文档创建者信息</li>
          <li><strong>标题:</strong> 设置文档标题</li>
          <li><strong>主题:</strong> 设置文档主题</li>
          <li><strong>关键词:</strong> 设置文档关键词（用逗号分隔）</li>
          <li><strong>描述:</strong> 设置文档描述</li>
          <li><strong>修订版本:</strong> 设置文档修订版本号</li>
          <li><strong>最后修改者:</strong> 设置最后修改者信息</li>
          <li><strong>说明:</strong> 这些属性会写入DOCX文件的元数据中，可在Word中查看</li>
        </ul>
        <h4 style="color: #0066cc;">图片支持说明:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>base64 图片:</strong> 完全支持 ( 格式)</li>
          <li><strong>blob URL 图片:</strong> 支持 blob:http://... 格式，浏览器环境中自动处理</li>
          <li><strong>远程图片:</strong> 仅在浏览器环境中支持，Node.js 环境需要预先转换为 base64</li>
          <li><strong>尺寸控制:</strong> 自动按比例缩放以适应页面 (默认最大宽度 600px)</li>
          <li><strong>格式支持:</strong> PNG, JPG/JPEG 等常见格式</li>
          <li><strong>样式支持:</strong> 支持缩进等基本样式属性</li>
          <li><strong>环境限制:</strong> Node.js 环境下 blob URL 和远程图片会产生警告，建议使用 base64</li>
        </ul>
        <h4 style="color: #0066cc;">HR标签支持说明:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>基本用法:</strong> &lt;hr&gt; - 生成默认的黑色底部边框分割线</li>
          <li><strong>样式支持:</strong> &lt;hr style="border: 2px solid red;"&gt; - 自定义边框样式</li>
          <li><strong>CSS类支持:</strong> &lt;hr class="custom-hr"&gt; - 通过CSS类应用样式</li>
          <li><strong>边框样式:</strong> 支持 solid、dashed、dotted、double、none 等样式</li>
          <li><strong>边框宽度:</strong> 支持 px、pt、em、thin、medium、thick 等单位</li>
          <li><strong>边框颜色:</strong> 支持 hex、rgb、rgba、颜色名称等格式</li>
          <li><strong>间距支持:</strong> 支持 margin 属性设置前后间距</li>
          <li><strong>效果说明:</strong> 生成带底部边框的段落，形成水平分割线效果</li>
        </ul>
        <h4 style="color: #0066cc;">表格支持说明:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>基本结构:</strong> 完全支持 table, tr, td, th, thead, tbody 标签</li>
          <li><strong>合并单元格:</strong> 支持 colspan（列合并）、rowspan（行合并）属性</li>
          <li><strong>表格样式:</strong> 自动添加边框，支持固定布局和100%宽度</li>
          <li><strong>表头支持:</strong> th 标签支持所有样式，不自动添加背景色</li>
          <li><strong>背景颜色:</strong> 支持 background-color 样式，仅在明确指定时才添加背景</li>
          <li><strong>边框样式:</strong> 完全支持 border 相关样式，包括简写和分别设置</li>
          <li><strong>边框宽度:</strong> 支持 px、pt、em、thin、medium、thick 等单位</li>
          <li><strong>边框样式:</strong> 支持 solid、dashed、dotted、double、none 等样式</li>
          <li><strong>边框颜色:</strong> 支持 hex、rgb、rgba、颜色名称等格式</li>
          <li><strong>单元格样式:</strong> 支持颜色、字体、对齐、行高、字符间距缩放等所有文本样式</li>
          <li><strong>内容格式:</strong> 单元格内支持富文本格式（粗体、斜体、下划线等）</li>
          <li><strong>错误处理:</strong> 自动处理空表格和无效结构，提供友好的警告信息</li>
        </ul>
        <h4 style="color: #0066cc;">Checkbox支持说明:</h4>
        <ul style="margin-bottom: 0;">
          <li><strong>基本用法:</strong> &lt;input type="checkbox"&gt; - 生成未选中的复选框</li>
          <li><strong>选中状态:</strong> &lt;input type="checkbox" checked&gt; - 生成已选中的复选框</li>
          <li><strong>标签文本:</strong> &lt;input type="checkbox" label="选项文本"&gt; - 设置复选框标签</li>
          <li><strong>文本内容:</strong> &lt;input type="checkbox"&gt;文本内容&lt;/input&gt; - 使用标签内容作为文本</li>
          <li><strong>样式支持:</strong> 支持颜色、字体、大小、粗体、斜体等所有文本样式</li>
          <li><strong>符号显示:</strong> 未选中显示 ☐，已选中显示 ☑</li>
          <li><strong>多种状态:</strong> 支持 checked、checked="true"、checked="checked" 等状态</li>
          <li><strong>应用场景:</strong> 问卷调查、用户协议、选项列表等</li>
        </ul>
      </div>
  </div>
`;

// 获取页面元素的函数
function getElements() {
  const htmlInput = document.getElementById('html-input') as HTMLTextAreaElement;
  const convertBtn = document.getElementById('convert-btn') as HTMLButtonElement;
  const loadExampleBtn = document.getElementById('load-example-btn') as HTMLButtonElement;
  const loadHrExampleBtn = document.getElementById('load-hr-example-btn') as HTMLButtonElement;
  const loadTableMergeExampleBtn = document.getElementById('load-table-merge-example-btn') as HTMLButtonElement;
  const loadCheckboxExampleBtn = document.getElementById('load-checkbox-example-btn') as HTMLButtonElement;
  const loadHeaderFooterExampleBtn = document.getElementById('load-header-footer-example-btn') as HTMLButtonElement;
  const loadCompleteExampleBtn = document.getElementById('load-complete-example-btn') as HTMLButtonElement;
  const statusDiv = document.getElementById('status') as HTMLDivElement;
  const warningsDiv = document.getElementById('warnings') as HTMLDivElement;

  return {
    htmlInput,
    convertBtn,
    loadExampleBtn,
    loadHrExampleBtn,
    loadTableMergeExampleBtn,
    loadCheckboxExampleBtn,
    loadHeaderFooterExampleBtn,
    loadCompleteExampleBtn,
    statusDiv,
    warningsDiv
  };
}

// HR示例HTML内容
const hrExampleHtml = `<h1 style="color: #2E86C1; font-family: 'Arial'; font-size: 24pt;">HR标签演示</h1>
<p style="color: #34495E; font-size: 14pt;">这是一个演示HR标签功能的文档。</p>

<h2 style="color: #27AE60;">基本分割线</h2>
<p>这是第一段文字</p>
<hr>
<p>这是第二段文字</p>

<h2 style="color: #27AE60;">带样式的分割线</h2>
<p>带样式的分割线：</p>
<hr style="border: 2px solid red; margin: 20px 0;">
<p>这是第三段文字</p>

<h2 style="color: #27AE60;">带CSS类的分割线</h2>
<p>带CSS类的分割线：</p>
<hr class="custom-hr">
<p>这是第四段文字</p>

<style>
.custom-hr {
  border: 3px dashed blue;
  margin: 30px 0;
}
</style>`;

// Checkbox示例HTML内容
const checkboxExampleHtml = `<h1 style="color: #2E86C1; font-family: 'Arial'; font-size: 24pt;">Checkbox演示</h1>
<p style="color: #34495E; font-size: 14pt;">这是一个演示Checkbox功能的文档。</p>

<h2 style="color: #27AE60;">基本Checkbox</h2>
<input type="checkbox" label="未选中的复选框" />
<input type="checkbox" checked label="已选中的复选框" />

<h2 style="color: #27AE60;">带样式的Checkbox</h2>
<input type="checkbox" checked label="重要选项" style="color: red; font-weight: bold; font-size: 16pt;" />
<input type="checkbox" label="普通选项" style="color: blue; font-size: 14pt;" />

<h2 style="color: #27AE60;">问卷调查示例</h2>
<p>请选择您喜欢的编程语言：</p>
<input type="checkbox" label="JavaScript" />
<input type="checkbox" checked label="TypeScript" />
<input type="checkbox" label="Python" />
<input type="checkbox" checked label="Java" />
<input type="checkbox" label="C++" />

<h2 style="color: #27AE60;">用户协议</h2>
<input type="checkbox" checked label="我已阅读并同意用户协议" style="color: #E74C3C; font-weight: bold;" />
<input type="checkbox" label="我愿意接收营销邮件" style="color: #7F8C8D;" />`;

// 页眉页脚示例HTML内容
const headerFooterExampleHtml = `<h1 style="color: #2E86C1; font-family: 'Arial'; font-size: 24pt;">页眉页脚演示</h1>
<p style="color: #34495E; font-size: 14pt;">这是一个演示页眉页脚功能的文档。</p>

<h2 style="color: #27AE60;">文档内容</h2>
<p>这是文档的主要内容部分。页眉和页脚会在每页显示。</p>

<h2 style="color: #27AE60;">功能说明</h2>
<ul>
  <li>页眉会显示在每页的顶部</li>
  <li>页脚会显示在每页的底部</li>
  <li>支持HTML格式和样式</li>
  <li>支持字体、颜色、对齐等样式设置</li>
</ul>

<h2 style="color: #27AE60;">示例内容</h2>
<p>这里是一些示例内容，用来演示页眉页脚的效果。当文档内容超过一页时，页眉页脚会在每页重复显示。</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3 style="color: #E74C3C;">子标题</h3>
<p>这是另一个段落，用来增加文档的长度，以便更好地演示页眉页脚的效果。</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>`;

// 完整功能示例HTML内容
const completeExampleHtml = `<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body {
            color: #333;
            font-size: 14px;
            font-family: "微软雅黑";
            margin: 0;
            max-width: 21cm;
            padding: 2.54cm;
        }
        
        .highlight {
            background-color: #FFFF00;
            color: #000;
        }
        
        .custom-hr {
            border: 3px dashed blue;
            margin: 30px 0;
        }
    </style>
</head>
<body>
    <h1 style="color: #2E86C1; font-family: 'Arial'; font-size: 24pt; text-align: center;">HTML转DOCX完整功能演示文档</h1>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">1. 基础文本格式</h2>
    <p style="color: #34495E; font-size: 14pt; text-indent: 2em; line-height: 1.5;">
        这是一个包含<strong style="color: red;">红色粗体</strong>和<em style="color: blue; font-size: 16pt;">蓝色大号斜体</em>的段落。
        支持<u style="color: green;">绿色下划线</u>、<span style="text-decoration: line-through; color: #E74C3C;">红色中划线</span>和<a href="https://example.com" style="color: purple; font-size: 16pt;">紫色大号链接</a>。
    </p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">2. 标题层级演示</h2>
    <h3 style="color: #E74C3C; font-size: 16pt;">三级标题 - 红色</h3>
    <h4 style="color: #8E44AD; font-size: 14pt;">四级标题 - 紫色</h4>
    <h5 style="color: #D35400; font-size: 12pt;">五级标题 - 橙色</h5>
    <h6 style="color: #16A085; font-size: 10pt;">六级标题 - 青色</h6>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">3. 列表功能演示</h2>
    <h3 style="color: #E74C3C;">无序列表</h3>
    <ul style="margin-left: 20px; line-height: 1.6;">
        <li style="color: #8E44AD;">支持标题 (H1-H6) 的颜色和字体</li>
        <li style="color: #E67E22; font-weight: bold;">支持段落和文本格式</li>
        <li style="color: #C0392B; font-size: 12pt;">支持<strong>粗体</strong>、<em>斜体</em>、<u style="color: green;">下划线</u></li>
        <li style="color: #2980B9;">支持<a href="#" style="color: purple;">链接</a>样式</li>
        <li style="color: #D35400;">支持图片插入和样式设置</li>
    </ul>
    
    <h3 style="color: #E74C3C;">有序列表</h3>
    <ol style="margin-left: 30px; line-height: 1.6;">
        <li style="color: #16A085; font-size: 15pt;">第一项 - 青绿色大号字体</li>
        <li style="color: #8E44AD; font-style: italic;" data-scale="75">第二项 - 紫色斜体75%间距缩放</li>
        <li style="color: #E74C3C; font-weight: bold;" data-scale="110">第三项 - 红色粗体110%间距缩放</li>
    </ol>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">4. 文本对齐演示</h2>
    <p style="text-align: left; font-size: 14pt; color: #666;">左对齐段落 - 这是默认的对齐方式</p>
    <p style="text-align: center; font-size: 14pt; color: #2980B9; font-weight: bold;">居中对齐段落 - 通常用于标题和重要内容</p>
    <p style="text-align: right; font-size: 14pt; color: #E74C3C;">右对齐段落 - 常用于署名和日期</p>
    <p style="text-align: justify; font-size: 14pt; color: #27AE60;">两端对齐段落 - 这是一段较长的文字用来演示两端对齐的效果，文字会均匀分布在行的两端，提供更好的阅读体验。</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">5. 行高演示</h2>
    <p style="line-height: 1; font-size: 14pt; color: #666;">line-height: 1 - 1倍行距（较紧密）</p>
    <p style="line-height: 1.5; font-size: 14pt; color: #2980B9;">line-height: 1.5 - 1.5倍行距（标准阅读）</p>
    <p style="line-height: 2; font-size: 14pt; color: #E74C3C;">line-height: 2 - 2倍行距（较宽松）</p>
    <p style="line-height: 24pt; font-size: 14pt; color: #27AE60;">line-height: 24pt - 固定行距24磅</p>
    <p style="line-height: 30pt; font-size: 16pt; color: #8E44AD;">line-height: 30pt - 固定行距30磅</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">6. 字符间距缩放演示</h2>
    <p style="font-size: 16pt; color: #555;">
        正常间距文字 
        <span data-scale="55" style="color: #E74C3C;">55%间距缩放</span> 
        <span data-scale="120" style="color: #27AE60;">120%间距缩放</span> 
        <span data-scale="80" style="color: #8E44AD; font-weight: bold;">80%间距缩放粗体</span>
    </p>
    <div data-scale="60" style="color: #FF5722; font-size: 18pt; margin-top: 20px; padding: 10px; border: 1px solid #ddd;">
        <strong>整个div块60%字符间距缩放：</strong>保持字体大小不变，调整字符间距为60%，包括<em>斜体文字</em>和<u>下划线文字</u>。
    </div>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">7. 图片功能演示</h2>
    <p style="font-size: 14pt; color: #555;">支持base64图片格式：</p>
    <img src="" alt="示例图片" style="text-indent: 20px;" />
    <p style="font-size: 12pt; color: #777; font-style: italic;">
        注：图片支持 base64 格式，并可以应用缩进等样式。在浏览器中也支持远程图片URL和blob URL。
    </p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">8. 表格功能演示</h2>
    <h3 style="color: #E74C3C;">基本表格</h3>
    <table style="border: 1px solid #333; margin-top: 10px;">
        <thead>
            <tr>
                <th style="color: #2980B9; font-weight: bold; text-align: center; font-size: 16pt;">产品名称</th>
                <th style="color: #E74C3C; font-weight: bold; text-align: center;">价格</th>
                <th style="color: #27AE60; font-weight: bold; text-align: center;">库存状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="font-size: 14pt;"><strong>笔记本电脑</strong></td>
                <td style="color: red; text-align: right;" data-scale="110">¥8,999.00</td>
                <td style="text-align: center; color: green; line-height: 1.5;">有库存</td>
            </tr>
            <tr>
                <td style="font-size: 14pt;"><em>无线鼠标</em></td>
                <td style="color: blue; text-align: right;">¥159.00</td>
                <td style="text-align: center; color: orange;">库存紧张</td>
            </tr>
        </tbody>
    </table>
    
    <h3 style="color: #E74C3C;">合并单元格表格</h3>
    <table border="1" style="width: 100%; margin: 20px 0;">
        <thead>
            <tr>
                <th colspan="3" style="text-align: center; background-color: #4CAF50; color: white;">销售报表</th>
            </tr>
            <tr>
                <th>产品</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2" style="background-color: #f9f9f9;">笔记本电脑</td>
                <td>10</td>
                <td>¥89,990</td>
            </tr>
            <tr>
                <td>5</td>
                <td>¥44,995</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" style="text-align: right; font-weight: bold;">总计:</td>
                <td style="font-weight: bold;">¥134,985</td>
            </tr>
        </tfoot>
    </table>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">9. 分割线(HR)演示</h2>
    <p>基本分割线：</p>
    <hr>
    <p>带样式的分割线：</p>
    <hr style="border: 2px solid red; margin: 20px 0;">
    <p>带CSS类的分割线：</p>
    <hr class="custom-hr">
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">10. 复选框(Checkbox)演示</h2>
    <h3 style="color: #E74C3C;">基本复选框</h3>
    <input type="checkbox" label="未选中的复选框" />
    <input type="checkbox" checked label="已选中的复选框" />
    
    <h3 style="color: #E74C3C;">带样式的复选框</h3>
    <input type="checkbox" checked label="重要选项" style="color: red; font-weight: bold; font-size: 16pt;" />
    <input type="checkbox" label="普通选项" style="color: blue; font-size: 14pt;" />
    
    <h3 style="color: #E74C3C;">问卷调查示例</h3>
    <p>请选择您喜欢的编程语言：</p>
    <input type="checkbox" label="JavaScript" />
    <input type="checkbox" checked label="TypeScript" />
    <input type="checkbox" label="Python" />
    <input type="checkbox" checked label="Java" />
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">11. 边框样式演示</h2>
    <p style="border: 1px solid black; padding: 10px;">1px 黑色实线边框</p>
    <p style="border: 2px dashed red; padding: 10px;">2px 红色虚线边框</p>
    <p style="border: 3px dotted blue; padding: 10px;">3px 蓝色点线边框</p>
    <p style="border: 4px double green; padding: 10px;">4px 绿色双线边框</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">12. 背景色演示</h2>
    <p style="background-color: #E3F2FD; padding: 10px;">浅蓝色背景</p>
    <p style="background-color: #FFEBEE; padding: 10px;">浅粉色背景</p>
    <p style="background-color: #E8F5E8; padding: 10px;">浅绿色背景</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">13. 特殊字符和实体</h2>
    <p>支持HTML实体：&amp;nbsp; &amp;lt; &amp;gt; &amp;amp; &amp;copy; &amp;reg;</p>
    <p>支持特殊字符：© ® ™ € ¥ £ ¢</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">14. 中划线演示</h2>
    <p style="font-size: 14pt; color: #555;">支持中划线功能：</p>
    <p style="text-decoration: line-through; color: #E74C3C;">红色中划线文字</p>
    <p style="text-decoration: line-through; color: #2980B9; font-weight: bold;">蓝色粗体中划线文字</p>
    <p style="text-decoration: line-through; color: #27AE60; font-style: italic;">绿色斜体中划线文字</p>
    <p style="text-decoration: line-through underline; color: #8E44AD;">紫色下划线+中划线文字</p>
    <p>正常文字 <span style="text-decoration: line-through; color: #D35400;">部分中划线</span> 正常文字</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">15. 字体大小和样式组合</h2>
    <p style="font-size: 10pt; color: #666;">10pt 小字体</p>
    <p style="font-size: 12pt; color: #333;">12pt 标准字体</p>
    <p style="font-size: 14pt; color: #000;">14pt 大字体</p>
    <p style="font-size: 16pt; color: #000; font-weight: bold;">16pt 粗体大字体</p>
    <p style="font-size: 18pt; color: #000; font-style: italic;">18pt 斜体大字体</p>
    <p style="font-size: 20pt; color: #000; text-decoration: underline;">20pt 下划线大字体</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">16. 缩进和间距演示</h2>
    <p style="text-indent: 2em; color: #555;">首行缩进2em的段落</p>
    <p style="margin-left: 20px; color: #555;">左边距20px的段落</p>
    <p style="padding-left: 30px; color: #555;">左内边距30px的段落</p>
    <div style="margin: 20px 0; padding: 15px; border: 1px solid #ddd; background-color: #f9f9f9;">
        <p style="margin: 0;">带外边距和内边距的div块</p>
    </div>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">17. 颜色格式演示</h2>
    <p style="color: #FF0000;">十六进制红色 #FF0000</p>
    <p style="color: rgb(0, 255, 0);">RGB绿色 rgb(0, 255, 0)</p>
    <p style="color: rgba(0, 0, 255, 0.8);">RGBA蓝色 rgba(0, 0, 255, 0.8)</p>
    <p style="color: red;">颜色名称 red</p>
    <p style="color: blue;">颜色名称 blue</p>
    <p style="color: green;">颜色名称 green</p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">18. 复杂样式组合</h2>
    <p style="color: #333; font-size: 16pt; font-weight: bold; text-align: center; line-height: 2; text-indent: 0; border: 2px solid #27AE60; padding: 15px; background-color: #E8F5E8; margin: 20px 0;">
        这是一个包含多种样式的复杂段落：<br>
        颜色、字体大小、粗体、居中对齐、行高、边框、内边距、背景色
    </p>
    
    <h2 style="color: #27AE60; font-family: 'Times New Roman'; font-size: 18pt;">19. 文档结尾</h2>
    <p style="text-align: center; color: #666; font-style: italic;">
        这是一个完整的HTML转DOCX功能演示文档，展示了所有支持的功能特性。
    </p>
    <p style="text-align: right; color: #999; font-size: 12pt;">
        生成时间：2024年
    </p>
</body>
</html>`;

// 表格合并单元格示例HTML内容
const tableMergeExampleHtml = `<h1 style="color: #2E86C1; font-family: 'Arial'; font-size: 24pt;">表格合并单元格演示</h1>
<p style="color: #34495E; font-size: 14pt;">这是一个演示表格合并单元格功能的文档。</p>

<h2 style="color: #27AE60;">基本合并单元格</h2>
<table border="1" style="width: 100%; margin: 20px 0;">
  <tr>
    <th colspan="2" style="text-align: center; background-color: #f0f0f0;">合并的标题</th>
  </tr>
  <tr>
    <td>列1</td>
    <td>列2</td>
  </tr>
</table>

<h2 style="color: #27AE60;">行合并示例</h2>
<table border="1" style="width: 100%; margin: 20px 0;">
  <tr>
    <th rowspan="2" style="text-align: center; background-color: #f0f0f0;">合并的行</th>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列2</td>
  </tr>
</table>

<h2 style="color: #27AE60;">复杂合并示例</h2>
<table border="1" style="width: 100%; margin: 20px 0;">
  <thead>
    <tr>
      <th colspan="3" style="text-align: center; background-color: #4CAF50; color: white;">销售报表</th>
    </tr>
    <tr>
      <th>产品</th>
      <th>数量</th>
      <th>金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" style="background-color: #f9f9f9;">笔记本电脑</td>
      <td>10</td>
      <td>¥89,990</td>
    </tr>
    <tr>
      <td>5</td>
      <td>¥44,995</td>
    </tr>
    <tr>
      <td>鼠标</td>
      <td>50</td>
      <td>¥2,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" style="text-align: right; font-weight: bold;">总计:</td>
      <td style="font-weight: bold;">¥137,485</td>
    </tr>
  </tfoot>
</table>`;

// 示例HTML内容
const exampleHtml = `<h1 style="color: #2E86C1; font-family: 'Arial'; font-size: 24pt;">文档标题</h1>
<p style="color: #34495E; font-size: 14pt; text-indent: 2em;">这是一个包含<strong style="color: red;">红色粗体</strong>和<em style="color: blue; font-size: 16pt;">蓝色大号斜体</em>的段落。</p>
<h2 style="color: #27AE60; font-family: 'Times New Roman';">功能列表</h2>
<ul style="margin-left: 20px;">
  <li style="color: #8E44AD;">支持标题 (H1-H6) 的颜色和字体</li>
  <li style="color: #E67E22; font-weight: bold;">支持段落和文本格式</li>
  <li style="color: #C0392B; font-size: 12pt;">支持<strong>粗体</strong>、<em>斜体</em>、<u style="color: green;">绿色下划线</u></li>
  <li style="color: #2980B9;">支持<a href="#" style="color: purple; font-size: 16pt;">紫色大号链接</a>样式</li>
  <li style="color: #D35400;">支持图片插入和样式设置</li>
</ul>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">图片功能演示</h2>
<p style="font-size: 14pt; color: #555;">
  下面是一个透明的PNG图片示例：
</p>
<img src="" alt="示例图片" style="text-indent: 20px;" />
<p style="font-size: 12pt; color: #777; font-style: italic;">
  注：图片支持 base64 格式，并可以应用缩进等样式。在浏览器中也支持远程图片URL和blob URL。
</p>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">文本对齐演示</h2>
<p style="text-align: left; font-size: 14pt; color: #666;">左对齐段落 - 这是默认的对齐方式</p>
<p style="text-align: center; font-size: 14pt; color: #2980B9; font-weight: bold;">居中对齐段落 - 通常用于标题和重要内容</p>
<p style="text-align: right; font-size: 14pt; color: #E74C3C;">右对齐段落 - 常用于署名和日期</p>
<p style="text-align: justify; font-size: 14pt; color: #27AE60;">两端对齐段落 - 这是一段较长的文字用来演示两端对齐的效果，文字会均匀分布在行的两端。</p>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">行高演示</h2>
<p style="line-height: 1; font-size: 14pt; color: #666;">line-height: 1 - 1倍行距（较紧密）</p>
<p style="line-height: 1.5; font-size: 14pt; color: #2980B9;">line-height: 1.5 - 1.5倍行距（标准阅读）</p>
<p style="line-height: 2; font-size: 14pt; color: #E74C3C;">line-height: 2 - 2倍行距（较宽松）</p>
<p style="line-height: 24pt; font-size: 14pt; color: #27AE60;">line-height: 24pt - 固定行距24磅（14pt字体）</p>
<p style="line-height: 30pt; font-size: 16pt; color: #8E44AD;">line-height: 30pt - 固定行距30磅（16pt字体）</p>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">字符间距缩放演示</h2>
<p style="font-size: 16pt; color: #555;">
  正常间距文字 
  <span data-scale="55" style="color: #E74C3C;">55%间距缩放</span> 
  <span data-scale="120" style="color: #27AE60;">120%间距缩放</span> 
  <span data-scale="80" style="color: #8E44AD; font-weight: bold;">80%间距缩放粗体</span>
</p>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">有序列表示例</h2>
<ol style="margin-left: 30px;">
  <li style="color: #16A085; font-size: 15pt;">第一项 - 青绿色大号字体</li>
  <li style="color: #8E44AD; font-style: italic;" data-scale="75">第二项 - 紫色斜体75%间距缩放</li>
  <li style="color: #E74C3C; font-weight: bold;" data-scale="110">第三项 - 红色粗体110%间距缩放</li>
</ol>
<div style="color: #7F8C8D; font-size: 12pt; text-indent: 3em; font-family: 'Courier New';">
  这是一个灰色、12pt字体、3em缩进、Courier New字体的div块。
</div>
<p style="background-color: #F8F9FA; color: #495057; padding-left: 40px; font-size: 13pt;">
  支持RGB颜色：<span style="color: rgb(255,0,0);">红色</span>、
  <span style="color: rgba(0,255,0,0.8);" data-scale="90">绿色90%间距缩放</span>、
  <span style="color: rgb(0,0,255);" data-scale="130">蓝色130%间距缩放</span>
</p>
<div data-scale="60" style="color: #FF5722; font-size: 18pt; margin-top: 20px; padding: 10px; border: 1px solid #ddd;">
  <strong>整个div块60%字符间距缩放：</strong>保持字体大小不变，调整字符间距为60%，包括<em>斜体文字</em>和<u>下划线文字</u>。
</div>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">表格功能演示</h2>
<p style="font-size: 14pt; color: #555;">支持表格标签和各种样式，包括表头、单元格格式化：</p>
<table style="border: 1px solid #333; margin-top: 10px;">
  <thead>
    <tr>
      <th style="color: #2980B9; font-weight: bold; text-align: center; font-size: 16pt;">产品名称</th>
      <th style="color: #E74C3C; font-weight: bold; text-align: center;">价格</th>
      <th style="color: #27AE60; font-weight: bold; text-align: center;">库存状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="font-size: 14pt;"><strong>笔记本电脑</strong></td>
      <td style="color: red; text-align: right;" data-scale="110">¥8,999.00</td>
      <td style="text-align: center; color: green; line-height: 1.5;">有库存</td>
    </tr>
    <tr>
      <td style="font-size: 14pt;"><em>无线鼠标</em></td>
      <td style="color: blue; text-align: right;">¥159.00</td>
      <td style="text-align: center; color: orange;">库存紧张</td>
    </tr>
    <tr>
      <td style="font-size: 14pt;">机械键盘</td>
      <td style="color: purple; text-align: right; font-weight: bold;">¥599.00</td>
      <td style="text-align: center; color: red;">缺货</td>
    </tr>
  </tbody>
</table>
<p style="font-size: 12pt; color: #777; font-style: italic;">
  注：表格支持完整的样式设置，包括颜色、字体、对齐、行高、字符间距缩放等。
</p>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">表格背景色演示</h2>
<p style="font-size: 14pt; color: #555;">演示表格背景色处理（只有明确指定才添加背景）：</p>
<table style="border: 1px solid #333; margin-top: 10px;">
  <tr>
    <th>普通表头</th>
    <th style="background-color: #E3F2FD;">蓝色背景表头</th>
    <th style="background-color: #FFEBEE;">粉色背景表头</th>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td style="background-color: #E8F5E8;">浅绿色背景</td>
    <td style="background-color: #FFF3E0;">浅橙色背景</td>
  </tr>
  <tr>
    <td style="font-weight: bold;">无背景粗体</td>
    <td style="background-color: #FFFF99; text-align: center;">黄色背景居中</td>
    <td style="background-color: rgba(255,0,0,0.1);">淡红色背景</td>
  </tr>
</table>
<h2 style="color: #D35400; font-family: 'Georgia'; text-indent: 1em;">表格边框样式演示</h2>
<p style="font-size: 14pt; color: #555;">演示各种边框样式和宽度的组合效果：</p>
<table style="border: 2px solid #2980B9; margin-top: 10px;">
  <tr>
    <th style="border: 1px dashed red;">虚线红色边框</th>
    <th style="border-top: 3px double green; border-bottom: 2px dotted blue;">复合边框</th>
    <th style="border-left: 4px solid orange;">左边框加粗</th>
  </tr>
  <tr>
    <td style="border: none;">无边框单元格</td>
    <td style="border-width: 2px; border-style: solid; border-color: purple;">紫色实线边框</td>
    <td style="border-right: 3px dashed gray; border-bottom: 1px solid black;">右下边框</td>
  </tr>
  <tr>
    <td style="border: thin solid #27AE60;">细绿色边框</td>
    <td style="border: medium dashed #E74C3C;">中等虚线红边框</td>
    <td style="border: thick dotted #8E44AD;">粗点状紫边框</td>
  </tr>
</table>`;

// 等待DOM加载完成后添加事件监听器
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM加载完成，开始设置事件监听器');

  const elements = getElements();

  // 检查元素是否存在
  if (!elements.loadExampleBtn) {
    console.error('loadExampleBtn 元素未找到');
  }
  if (!elements.loadHrExampleBtn) {
    console.error('loadHrExampleBtn 元素未找到');
  }
  if (!elements.loadTableMergeExampleBtn) {
    console.error('loadTableMergeExampleBtn 元素未找到');
  }
  if (!elements.htmlInput) {
    console.error('htmlInput 元素未找到');
  }

  // 加载示例按钮事件
  if (elements.loadExampleBtn) {
    elements.loadExampleBtn.addEventListener('click', () => {
      console.log('加载示例按钮被点击');
      console.log('exampleHtml 长度:', exampleHtml.length);
      console.log('exampleHtml 前100字符:', exampleHtml.substring(0, 100));
      elements.htmlInput.value = exampleHtml;
      console.log('已设置示例HTML内容');
    });
  }

  // 加载HR示例按钮事件
  if (elements.loadHrExampleBtn) {
    elements.loadHrExampleBtn.addEventListener('click', () => {
      console.log('加载HR示例按钮被点击');
      console.log('hrExampleHtml 长度:', hrExampleHtml.length);
      console.log('hrExampleHtml 前100字符:', hrExampleHtml.substring(0, 100));
      elements.htmlInput.value = hrExampleHtml;
      console.log('已设置HR示例HTML内容');
    });
  }

  // 加载表格合并示例按钮事件
  if (elements.loadTableMergeExampleBtn) {
    elements.loadTableMergeExampleBtn.addEventListener('click', () => {
      console.log('加载表格合并示例按钮被点击');
      console.log('tableMergeExampleHtml 长度:', tableMergeExampleHtml.length);
      console.log('tableMergeExampleHtml 前100字符:', tableMergeExampleHtml.substring(0, 100));
      elements.htmlInput.value = tableMergeExampleHtml;
      console.log('已设置表格合并示例HTML内容');
    });
  }

  // 加载Checkbox示例按钮事件
  if (elements.loadCheckboxExampleBtn) {
    elements.loadCheckboxExampleBtn.addEventListener('click', () => {
      console.log('加载Checkbox示例按钮被点击');
      console.log('checkboxExampleHtml 长度:', checkboxExampleHtml.length);
      console.log('checkboxExampleHtml 前100字符:', checkboxExampleHtml.substring(0, 100));
      elements.htmlInput.value = checkboxExampleHtml;
      console.log('已设置Checkbox示例HTML内容');
    });
  }

  // 加载页眉页脚示例按钮事件
  if (elements.loadHeaderFooterExampleBtn) {
    elements.loadHeaderFooterExampleBtn.addEventListener('click', () => {
      console.log('加载页眉页脚示例按钮被点击');
      console.log('headerFooterExampleHtml 长度:', headerFooterExampleHtml.length);
      console.log('headerFooterExampleHtml 前100字符:', headerFooterExampleHtml.substring(0, 100));
      elements.htmlInput.value = headerFooterExampleHtml;
      console.log('已设置页眉页脚示例HTML内容');
    });
  }

  // 加载完整功能示例按钮事件
  if (elements.loadCompleteExampleBtn) {
    elements.loadCompleteExampleBtn.addEventListener('click', () => {
      console.log('加载完整功能示例按钮被点击');
      console.log('completeExampleHtml 长度:', completeExampleHtml.length);
      console.log('completeExampleHtml 前100字符:', completeExampleHtml.substring(0, 100));
      elements.htmlInput.value = completeExampleHtml;
      console.log('已设置完整功能示例HTML内容');
    });
  }

  // 转换按钮事件
  elements.convertBtn.addEventListener('click', async () => {
    const htmlContent = elements.htmlInput.value.trim();

    if (!htmlContent) {
      elements.statusDiv.innerHTML = '<span style="color: red;">请输入HTML内容</span>';
      return;
    }

    // 显示转换中状态
    elements.statusDiv.innerHTML = '<span style="color: #007bff;">正在转换中...</span>';
    elements.convertBtn.disabled = true;
    elements.convertBtn.textContent = '转换中...';
    elements.warningsDiv.innerHTML = '';

    try {
      // 获取页面设置
      const options = {
        margins: {
          top: parseFloat((document.getElementById('margin-top') as HTMLInputElement).value) || 2.54,
          right: parseFloat((document.getElementById('margin-right') as HTMLInputElement).value) || 2.54,
          bottom: parseFloat((document.getElementById('margin-bottom') as HTMLInputElement).value) || 2.54,
          left: parseFloat((document.getElementById('margin-left') as HTMLInputElement).value) || 2.54
        },
        properties: {
          creator: (document.getElementById('creator') as HTMLInputElement).value || undefined,
          title: (document.getElementById('title') as HTMLInputElement).value || undefined,
          subject: (document.getElementById('subject') as HTMLInputElement).value || undefined,
          keywords: (document.getElementById('keywords') as HTMLInputElement).value || undefined,
          revision: parseInt((document.getElementById('revision') as HTMLInputElement).value, 10) || undefined,
          lastModifiedBy: (document.getElementById('last-modified-by') as HTMLInputElement).value || undefined,
          description: (document.getElementById('description') as HTMLTextAreaElement).value || undefined
        },
        header: {
          content: (document.getElementById('header-content') as HTMLTextAreaElement).value || undefined,
          style: {
            fontSize: parseInt((document.getElementById('header-font-size') as HTMLInputElement).value, 10) || 16,
            alignment: (document.getElementById('header-alignment') as HTMLSelectElement).value as 'left' | 'center' | 'right'
          }
        },
        footer: {
          content: (document.getElementById('footer-content') as HTMLTextAreaElement).value || undefined,
          style: {
            fontSize: parseInt((document.getElementById('footer-font-size') as HTMLInputElement).value, 10) || 14,
            alignment: (document.getElementById('footer-alignment') as HTMLSelectElement).value as 'left' | 'center' | 'right'
          }
        }
      };

      // 过滤掉空值
      Object.keys(options.properties).forEach(key => {
        if (options.properties[key] === undefined || options.properties[key] === '') {
          delete options.properties[key];
        }
      });

      // 转换HTML为DOCX
      const { buffer, warnings } = await convertHtmlToDocxBuffer(htmlContent, options);

      // 显示警告信息
      if (warnings.length > 0) {
        elements.warningsDiv.innerHTML = `
          <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 15px; margin-top: 10px;">
            <h4 style="margin-top: 0; color: #856404;">转换警告:</h4>
            <ul style="margin-bottom: 0;">
              ${warnings.map(warning => `<li>${warning}</li>`).join('')}
            </ul>
          </div>
        `;
      }

      // 创建下载链接
      const blob = new Blob([buffer], {
        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `converted-document-${new Date().getTime()}.docx`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);

      elements.statusDiv.innerHTML = '<span style="color: #28a745;">转换成功！文件已开始下载。</span>';
    } catch (error) {
      console.error('转换失败:', error);
      elements.statusDiv.innerHTML = `<span style="color: red;">转换失败: ${error.message || '未知错误'}</span>`;
    } finally {
      elements.convertBtn.disabled = false;
      elements.convertBtn.textContent = '转换并下载 DOCX';
    }
  });
});
